<!--电影搜索框-->
<template>
  <div>
    <!--电影顶部搜索框-->
    <div class="all-button-style">
      <el-button
          type="text"
          class="text-button"
          v-for="item in buttonType"
          @click="getShowing(item.id)"
          round :class="{'text-button-activity':item.isActivity,'text-button-inactivity':!item.isActivity}">
        {{ item.name }}
      </el-button>
    </div>
    <!--电影分类搜索框-->
    <div class="second-button-style">
      <el-row style="height: 50px">
        <div>
          <el-input
              placeholder="查找电影" v-model="input" class="input-with-select">
            <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchByMovieName(input)"
                description="模糊查"/>
          </el-input>
        </div>
      </el-row>
      <!--类型-->
      <el-row :gutter="0" class="row-style">
        <el-col :span="2" class="text-style">
          <span>类型</span>
        </el-col>
        <el-col :span="20">
          <el-button
              @click="allType"
              :class="{'button-active': allActiveType,'button-not-active': !allActiveType}"
              type="danger"
              round
              class="all-button">
            全部
          </el-button>
          <el-button
              @click="nowButtonActive(item.typeId,'type')"
              v-for="item in buttonMovieType"
              :key="item.typeId"
              round type="danger"
              v-model="buttonMovieType"
              :class="{'button-active': item.isActive,'button-not-active': !item.isActive}"
              class="item">
            {{ item.type }}
          </el-button>
        </el-col>
      </el-row>
      <!--区域-->
      <el-row :gutter="0" class="row-style">
        <el-col :span="2" class="text-style">
          <span>区域</span>
        </el-col>
        <el-col :span="20">
          <el-button
              @click="allArea"
              :class="{'button-active': allActiveArea,'button-not-active': !allActiveArea}"
              type="danger"
              round
              class="all-button">
            全部
          </el-button>
          <el-button
              @click="nowButtonActive(item.countryId,'country')"
              v-for="item in buttonMovieArea"
              :key="item.countryId"
              round type="danger"
              :class="{'button-active': item.isActive,'button-not-active': !item.isActive}"
              class="item">
            {{ item.countryName }}
          </el-button>
        </el-col>
      </el-row>

      <!--年代-->
      <el-row :gutter="0" class="row-style">
        <el-col :span="2" class="text-style">
          <span>年代</span>
        </el-col>
        <el-col :span="20">
          <el-button
              @click="allYear"
              :class="{'button-active': allActiveYear,'button-not-active': !allActiveYear}"
              type="danger"
              round
              class="all-button">
            全部
          </el-button>
          <el-button
              @click="nowButtonActive(item,'year')"
              v-for="item in buttonMovieYear"
              :key="item.yearId"
              round type="danger"
              :class="{'button-active': item.isActive,'button-not-active': !item.isActive}"
              class="item">
            {{ item.yearName }}
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!--排序单选框-->
    <el-radio-group v-model="paramData.sort" class="search-style-radio">
      <el-radio
          @change="toSort"
          :label="0">
        按热门排序
      </el-radio>
      <el-radio
          @change="toSort"
          :label="1">
        按时间排序
      </el-radio>
      <el-radio
          @change="toSort"
          :label="2">
        按评价排序
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: "movieSecondSearch",
  data() {
    return {
      //模糊参数
      input: '',
      //全部电影类型
      allActiveType: true,
      //全部电影所属国家
      allActiveArea: true,
      //全部电影所属年代
      allActiveYear: true,
      textButtonValue: 1,
      //全部电影类型的数据
      buttonMovieType: [],
      //全部电影所属国家的数据
      buttonMovieArea: [],
      //全部电影所属年代的数据
      buttonMovieYear: [],
      //参数
      paramData: {
        //电影类型
        typeId: null,
        //所属国家
        countryId: null,
        //所属年代
        year: null,
        //排序：0 票房
        sort: 0,
        //上映状态：1 正在热映
        beOnStatus: 1,
      },

    }
  },
  props: {
    buttonType: {
      type: Array,
      default() {
        return [
          {
            id: 1,
            name: '正在热映',
            isActivity: true
          },
          {
            id: 2,
            name: '即将上映',
            isActivity: false
          },
          {
            id: 3,
            name: '经典影片',
            isActivity: false
          }
        ]
      }
    },
    movieType: {
      type: String,
      default: '类型'
    },
    movieArea: {
      type: String,
      default: '区域'
    },
  },
  created() {
    this.getAllMovieTypeName()
    this.getAllMovieAreaName()
    this.getMovieAllYear()
  },
  methods: {
    //模糊查询
    searchByMovieName(input) {
      if (input != null) {
        this.$emit("searchByMovieName", input)
      }
    },

    //获取电影上映状态
    queryByBeOnStatus(beOnStatus) {
      this.getShowing(beOnStatus)
    },
    //获取所有的电影类型
    getAllMovieTypeName() {
      this.$http({
        url: '/web/movie/search/getAllMovieType',
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.buttonMovieType = data.data
        }
      })
    },

    //获取所有的地区类型
    getAllMovieAreaName() {
      this.$http({
        url: '/web/movie/search/getAllMovieCountry',
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.buttonMovieArea = data.data
        }
      })
    },

    //获取电影的所有的年代
    getMovieAllYear() {
      this.$http({
        url: '/web/movie/search/getAllOwnYear',
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.buttonMovieYear = data.data
        }
      })
    },

    //根据上映状态显示
    getShowing(id) {
      for (let item of this.buttonType) {
        if (item.id === id) {
          //点击时参数为id
          this.paramData.beOnStatus = id
          item.isActivity = true
          this.textButtonValue = id
          //将数据发送给父类
          this.$emit("search-data", this.paramData)
        } else {
          item.isActivity = false
        }
      }
    },

    //全部类型
    allType() {
      this.allActiveType = true
      this.paramData.typeId = ''
      for (let item of this.buttonMovieType) {
        item.isActive = false
      }
      //将数据发送给父类
      this.$emit("search-data", this.paramData)
    },

    //全部区域
    allArea() {
      this.allActiveArea = true
      this.paramData.countryId = ''
      for (let item of this.buttonMovieArea) {
        item.isActive = false
      }
      //将数据发送给父类
      this.$emit("search-data", this.paramData)
    },

    //排序
    toSort() {
      this.$emit("search-data", this.paramData)
    },

    //全部年代
    allYear() {
      this.allActiveYear = true
      this.paramData.year = ''
      for (let item of this.buttonMovieYear) {
        item.isActive = false
      }
      //将数据发送给父类
      this.$emit("search-data", this.paramData)
    },

    //点击循环按钮
    nowButtonActive(id, stype) {
      //电影类型
      if (stype === 'type') {
        this.allActiveType = false
        //参数：电影类型
        this.paramData.typeId = id
        //将数据发送给父类
        this.$emit("search-data", this.paramData)
        for (let item of this.buttonMovieType) {
          if (item.typeId === id) {
            item.isActive = true
          } else {
            item.isActive = false
          }
        }
        //国家
      } else if (stype === 'country') {
        this.allActiveArea = false
        //参数：所属国家
        this.paramData.countryId = id
        //将数据发送给父类
        this.$emit("search-data", this.paramData)
        for (let item of this.buttonMovieArea) {
          if (item.countryId === id) {
            item.isActive = true
          } else {
            item.isActive = false
          }
        }
        //年代
      } else if (stype === 'year') {
        this.allActiveYear = false
        //参数：所属年代
        this.paramData.year = id.yearName
        //将数据发送给父类
        this.$emit("search-data", this.paramData)
        for (let item of this.buttonMovieYear) {
          if (item.yearId === id.yearId) {
            item.isActive = true
          } else {
            item.isActive = false
          }
        }
      }
    },
  }
}
</script>

<style scoped>
.text-button-inactivity {
  font-size: 20px;
  color: grey;
}

.text-button-activity {
  font-size: 25px;
  color: red;
}

.all-button-style {
  padding: 30px;
  text-align: center;
  background-color: #333333;
  margin: 0;
}

.second-button-style {
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 20px;
  border: 1px solid lightgray
}

.text-style {
  text-align: center;
  font-size: 20px;
  margin-top: 7px;
}

.row-style {
  padding: 20px;
  border: 1px solid lightgray;
}

.item {
  margin-right: 20px;
}

.all-button {
  margin-right: 20px;
}

.button-active {
  background-color: #F56C6C;
  color: #ffffff;
}

.button-not-active {
  background-color: #ffffff;
  color: #333;
  border: none;
  outline: transparent;
}

.search-style-radio {
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 40px;
}

.input-with-select {
  width: 240px;
  margin-top: 6px;
  margin-left: 4px;
}
</style>
